<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<!-- DOM事件 -->
<a id="link1" href="#">普通链接点击事件</a>
<a id="link2" href="#">延迟链接事件</a>
<!-- 组件事件 -->
<div id="btn"></div>

<script type="text/javascript">
Ext.onReady	(function(){
	Ext.get("link1").on("click", function(e){
		// e是一个Ext.EventObject
		// alert(e);
		// 调用Firebug输出在console上查看
		// console.dir(e);
	});
	// 绑定事件对应Ext.util.Observable的addListener方法
	// scope：single只执行一次，buffer缓存一段时间内的操作只执行最后一次，
	Ext.get("link2").on("click", function(e){
		alert("link2");
		// 阻止默认事件执行
		e.preventDefault();
	}, this, {delay: 5000});
	//
	var btn = new Ext.Button({text:"我的按钮"});
	btn.render("btn");
	// 查看Ext.Button类事件API，click有2个默认参数Button和EventObject
	btn.on("click", function(b, e){
		var win = new Ext.Window({
			title: b.text,
			width: 300,
			height: 200
		});
		// 窗口显示之前触发，返回值如果是false，窗口不显示，具体看API
		win.on("beforeshow",function(){
			// return false;
			return confirm("是否要显示窗口？");
		});
		win.show();
	});
});
</script>
</body>
</html>
